<template>
	<view class="upload-grid">
		<view v-if="multiple" class="upload-item" v-for="(item, index) in fileList" :key="index">
			<view class="">
				<u-image @tap="selectFile(index)" :border-radius="10" width="100%" :height="200" :src="$getImageUrl(item.Value)"></u-image>
				<view class="u-flex-col u-text-center u-font-12">
					<text>{{ item.Title }}</text>
					<view class="u-flex u-row-center">
						<text style="margin-right: 10rpx;">审批金额: </text><u-input :disabled="!input" :height="40" :customStyle="{ fontSize: '24rpx' }" v-model="item.Amount" :border="true"></u-input>
					</view>
				</view>
			</view>
		</view>

		<u-upload style="display: none;"
			class="upload-item"
			ref="upload"
			:show-progress="false"
			:auto-upload="false"
			:show-upload-list="!multiple"
			:file-list="fileList"
			@on-choose-complete="onFileChange"
			@on-remove="deleteFile"
			:max-count="!multiple ? 1 : 99"
			:upload-text="uploadText"
		></u-upload>
	</view>
</template>

<script>
export default {
	name: 'real-image-upload',
	props: {
		value: {
			type: [Array, String],
			default() {
				return [];
			}
		},
		maxCount: {
			type: Number,
			default: 99
		},
		uploadText: {
			type: String,
			default: '上传图片'
		},
		readonly: {
			type: Boolean,
			default: false
		},
		multiple: {
			type: Boolean,
			default: true
		},
		input: {
			type: Boolean,
			default: false
		}
	},
	
	data() {
		return {
			currentIndex: 0
		}
	},

	created() {
		if (this.value && this.value.length > 0) {
			if (this.multiple) {
				this.fileList = this.value.filter(item => item.Value);
			} else {
				this.fileList = [
					{
						url: this.$getImageUrl(this.value)
					}
				];
			}
		}
	},

	watch: {
		value(val) {
			console.log('value', val);

			if (val) {
				if (this.multiple) {
					this.fileList = val.filter(item => item.Value);
				} else {
					this.fileList = [
						{
							url: this.$getImageUrl(this.value)
						}
					];
				}
			}
		}
	},

	data() {
		return {
			fileList: []
		};
	},
	methods: {
		selectFile(index) {
			console.log()
			
			this.currentIndex = index
			this.$refs.upload.selectFile()
		},
		
		onFileChange(list, name) {
			const file = list[list.length - 1].file;
			this.$fileUpload(file).then(res => {
				if (this.multiple) {
					this.fileList[this.currentIndex].Value = res.key;
					this.$emit('input', this.fileList);
					this.$emit('change', this.fileList);
				} else {
					this.$emit('input', res.key);
					this.$emit('change', res.key);
				}
			});
		},

		deleteFile(index) {
			uni.showModal({
				title: '提示',
				content: '您确定要删除此项吗？',
				success: res => {
					if (res.confirm) {
						if (this.multiple) {
							this.fileList.splice(index, 1);
							this.$emit('input', this.fileList);
							this.$emit('change', this.fileList);
						} else {
							this.$emit('input', '');
							this.$emit('change', '');
						}
					}
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.upload-grid {
	display: grid;
	margin: 10rpx 30rpx;
	grid-template-columns: repeat(2, 1fr);
	// grid-template-rows: repeat(auto-fill, 260rpx);
	gap: 15rpx;

	grid-auto-rows: 350rpx;

	.upload-item {
		padding: 20rpx;
		border: 1px solid rgb(235, 236, 238);
		border-radius: 10rpx;
		box-sizing: border-box;
		position: relative;
	}

	.u-delete-icon {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
		z-index: 10;
		border-radius: 100rpx;
		width: 44rpx;
		height: 44rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
}

/deep/.u-list-item {
	margin: 0 !important;
}
</style>
